<template>
	<div>
	<!-- 面包屑导航区 -->
		<el-breadcrumb separator="/">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>用户管理</a></el-breadcrumb-item>
		  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图区 -->
	<el-card style="margin-top: 15px;" >
		<el-row :gutter="30">
		  <el-col :span="7">
			    <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select" clearable @clear="userClear">
			      <el-button slot="append" icon="el-icon-search" @click="userSearch"></el-button>
			    </el-input>
		  </el-col>
		  <el-col :span="4">
			  <el-button type="primary" @click="dialogFormVisible = true">添加用户</el-button>
		  </el-col>
		</el-row>
		<!-- 表格视图 -->
		<el-table :data="userList" border style="margin-top: 15px;"  :header-cell-style="{textAlign: 'center'}"  :cell-style="{ textAlign: 'center' }">
			<el-table-column label="#" type="index" ></el-table-column>
			<el-table-column  label="姓名" prop="username"></el-table-column>
			<el-table-column label="邮箱" prop="email"></el-table-column>
			<el-table-column label="电话" prop="mobile"></el-table-column>
			<el-table-column label="角色" prop="role_name"></el-table-column>
			<el-table-column label="状态" prop="mg_state"> 
			<!-- 	<template slot-scope="scope">		vue 作用域插槽
					{{scope.row}}
				</template> -->
				<template slot-scope="scope" >
					<el-switch v-model="scope.row.mg_state" @change="userChange(scope.row)">
					</el-switch>
				</template>
			</el-table-column>
				<el-table-column label="操作" >
					<template slot-scope="scope">
						<el-tooltip  effect="dark" content="修改用户" placement="top" :enterable="false">
							<el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
						</el-tooltip>
						<el-tooltip  effect="dark" content="删除用户" placement="top" :enterable="false">
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="userDelete(scope.row)"></el-button>
						</el-tooltip>
							<el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
						<el-button size="mini" type="warning" icon="el-icon-setting"  @click="steRole(scope.row)"></el-button>>
						 </el-tooltip>
					</template>
				
				</el-table-column>
		</el-table>
		<!-- 分页区域 -->
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryInfo.pagenum"
		      :page-sizes="[1, 2, 5, 10]"
		      :page-size="queryInfo.pagesize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total"
			  style="display: flex;justify-content: center;margin-top: 15px;" >
		    </el-pagination>
	</el-card>
	<!-- 添加用户对话框 -->
	<el-dialog title="添加用户" :visible.sync="dialogFormVisible" @close="addDialog">
	  <el-form ref="addFormRef" :rules="addFormRules" :model="addForm" label-width="70px" class="demo-ruleForm">
	    <el-form-item label="用户名" prop="username">
	  	<el-input  v-model="addForm.username" placeholder="请输入用户名"></el-input>
	    </el-form-item>
		<el-form-item label="密码" prop="password">
		<el-input  v-model="addForm.password" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-form-item label="邮箱" prop="email">
		<el-input  v-model="addForm.email" placeholder="请输入邮箱"></el-input>
		</el-form-item>
		<el-form-item label="手机号" prop="mobile">
		<el-input  v-model="addForm.mobile" placeholder="请输入手机号"></el-input>
		</el-form-item>
	    </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormVisible = false">取 消</el-button>
	    <el-button type="primary" @click="addUser">确 定</el-button>
	  </div>
	</el-dialog>
	<!-- 修改用户对话框 -->
	<el-dialog title="修改用户" :visible.sync="dialogFormModify" @close="modifyDialog">
	  <el-form ref="modifyFormRef" :rules="addFormRules" :model="modifyForm" label-width="70px" class="demo-ruleForm">
	    <el-form-item label="用户名" prop="username">
			<el-input placeholder="请输入用户名" v-model="modifyForm.username" :disabled="true"></el-input>
	    </el-form-item>
		<el-form-item label="邮箱" prop="email">
			<el-input  v-model="modifyForm.email" placeholder="请输入邮箱"></el-input>
		</el-form-item>
		<el-form-item label="手机号" prop="mobile">
			<el-input  v-model="modifyForm.mobile" placeholder="请输入手机号"></el-input>
		</el-form-item>
	    </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="dialogFormModify = false">取 消</el-button>
	    <el-button type="primary" @click="modify">确 定</el-button>
	  </div>
	</el-dialog>
	<!-- 分配角色对话框 -->
	<el-dialog title="修改用户" :visible.sync="setRoleDialogVisible" @close="modifyDialog">
	  <el-form ref="modifyFormRef" :rules="addFormRules" :model="modifyForm" label-width="70px" class="demo-ruleForm">
	    <div>
			<p>当前用户 :  {{userInfo.username}}</p>
			<p>当前角色 :  {{userInfo.role_name}}</p>
			<p>分配角色 :
				<el-select v-model="requstRoles" placeholder="请选择">
				    <el-option
				      v-for="item in rolesList"
				      :key="item.id"
				      :label="item.roleName"
				      :value="item.id">
				    </el-option>
				  </el-select>
			</p>
		</div>
	
	    </el-form>
	  <div slot="footer" class="dialog-footer">
	    <el-button @click="setRoleDialogVisible = false">取 消</el-button>
	    <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
	  </div>
	</el-dialog>
	</div>
	
</template>

<script>
	export default{
		data(){
						//验证电话号码合法性
			var checkMobile = (rule,value,cb) => {
						//验证电话号码的正则表达式
				const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				if(regMobile.test(value)){
					return cd()
				}
			}
			return{
				queryInfo:{			//获取用户列表参数对象
					query:'',		//搜索框内容
					pagenum:1,		//页数
					pagesize:10		//每页显示条数
				},
				userList:[],		//获取用户数据集合
				total:0,			//数据条数	
				dialogFormVisible:false,		//添加用户对话框默认显示隐藏
				dialogFormModify:false,			//修改用户对话框默认显示隐藏
				setRoleDialogVisible:false,		//分配角色对话框默认显示隐藏
				addForm:{			//添加用户表单数据
					username:'',
					password:'',
					email:'',	
					mobile:''
				},		
				modifyForm:{		//修改用户对话框数据
					username:'',
					email:'',
					mobile:'',
					id:0
				},	
				userInfo:{		//需要被分配角色的用户信息
					
				},
				rolesList:[],		//所有的角色数据列表
				requstRoles:1,		//分配角色对话框选择器的值
				addFormRules: {		//添加用户表单验证规则
					  username: [
						{ required: true, message: '请输入用户名称', trigger: 'blur' },
						{ min: 1, max: 10, message: '长度在 1 ~ 10 个字符', trigger: 'blur' }
					  ],
					  password: [
					   { required: true, message: '请输入密码', trigger: 'blur' },
					   { min: 6, max: 15, message: '长度在 6 到 12 个字符', trigger: 'blur' }
					  ],
					  email: [
						{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
						{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }		//验证邮箱
					  ],
					  mobile: [
					   { required: true, message: '请输入手机号', trigger: 'blur' },
					   { min: 10, max: 12, message: '长度为 11 位', trigger: 'blur' },
					   // {validator: checkMobile, trigger:'blur'}			//电话号码验证使用
					  ],
				}

			}
		},
		methods:{
			getUSerList(){			//获取页面数据
				this.$axios.get('users',{params:this.queryInfo}).then(data => {
					console.log(data.data)
					this.userList = data.data.data.users
					this.total = data.data.data.total
				})
			},
			handleSizeChange(newSize){		//监听的切换当前页面显示多少条
				this.queryInfo.pagesize = newSize
				this.getUSerList()
			},
			handleCurrentChange(newPage){		//监听页码值发生变化
				this.queryInfo.pagenum = newPage
				this.getUSerList()
			},
			userChange(change){		//监听状态 并且进行设置
				console.log(change)
				this.$axios.put('users/'+change.id+'/state/'+change.mg_state).then(data => {
					console.log(data.data)
					if(data.data.meta.status == 200){
						this.$message({message: '更改用户状态成功', type: 'success'});
					}else{
						this.$message({message: '更改用户状态失败,请刷新页面重试', type: 'error'});
					}
				})
			},
			userSearch(){		//搜索功能
				this.$axios.get('users',{params:this.queryInfo}).then(data => {
					console.log(data.data)
					console.log(data.data.data.users)
					this.userList = data.data.data.users
						this.getUSerList()
					if(data.data.data.total == 0){
						this.$message({message: '暂无此用户请重试', type: 'warning'});
					}else if(data.data.meta.status == 200){
						this.$message({message: '成功搜索用户', type: 'success'});
					}else{
						this.$message({message: '用户搜索失败', type: 'error'});
					}
				})
			},
			userClear(){	//搜索框清空重新渲染页面
				this.getUSerList()
			},
			addDialog(){		//监听添加用户对话框的关闭时间事件
				this.$refs.addFormRef.resetFields()		//重置添加用户对话框数据
			},
			modifyDialog(){		//监听修改用户对话框的关闭时间事件
				this.$refs.modifyFormRef.resetFields()		//重置添加用户对话框数据
			},
			addUser(){	//添加用户
				this.$refs.addFormRef.validate(valid => {		//验证数据是否合法
					console.log(valid)
					if(valid == true){
						var data = {
							username:this.addForm.username,
							password:this.addForm.password,
							email:this.addForm.email,
							mobile:this.addForm.mobile
						}
						this.$axios.post('users',data).then(src => {
							console.log(src.data)
							this.$message({message: '添加用户成功', type: 'success'});
							this.getUSerList()
						})
						this.dialogFormVisible = false
					}
				})
			},
			handleEdit(row){		//点击修改用户触发
				console.log(row)
				this.dialogFormModify = true
				this.modifyForm.username = row.username
				this.modifyForm.email = row.email
				this.modifyForm.mobile = row.mobile
				this.modifyForm.id = row.id
			},
			modify(){		//用户确定修改事件
				this.$refs.modifyFormRef.validate(valid => {
					if(valid == true){
						var id = this.modifyForm.id
							var data = {
								email:this.modifyForm.email,
								mobile:this.modifyForm.mobile
							}
						this.$axios.put('users/'+id,data).then(data => {
							console.log(data.data)
							if(data.data.meta.status == 200){
								this.$message({message: data.data.meta.msg, type: 'success'});
							}
								this.getUSerList()
							})
						this.dialogFormModify = false
					}
				})
			},
			userDelete(row){
				console.log(row)
				this.$confirm('此操作将永久删除该用户, 是否继续?', '提示',{
					confirmButtonText: '确定', cancelButtonText: '取消',type: 'warning'
				        }).then(() => {
							console.log(row.id)
							this.$axios.delete('users/'+row.id).then(data => {
								console.log(data.data)
								this.getUSerList()
							})
				          this.$message({type: 'success',message: '删除成功!'
				          });
				        }).catch(() => {
				          this.$message({type: 'info',message: '已取消删除'
				       });          
				   });
			},
			steRole(row){		//展示分配角色的对话框
				this.userInfo = row
				console.log(row)
				this.requstRoles = row.role_name
				this.$axios.get('roles').then(data => {
					this.rolesList = data.data.data
				})
				this.setRoleDialogVisible = true	
			},
			saveRoleInfo(row){		//分配角色对话框确定事件
			this.$axios.put('users/'+this.userInfo.id+'/role',{rid:this.requstRoles}).then(data => {
				console.log(data.data)
				if(data.data.meta.status == 200){
					this.$message({message: data.data.meta.msg, type: 'success'});
				}else{
					this.$message({message: data.data.meta.msg, type: 'error'});
				}
				this.getUSerList()
				
			})
				this.setRoleDialogVisible = false
			}
		},
		created(){
			this.getUSerList()
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
